<template>
    <div>
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column label="实验室名称">
          <template #default="scope">
            <el-link type="primary" @click="handleLocation(scope.row)">{{scope.row.title}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="capacity" label="容纳人数"></el-table-column>
        <el-table-column label="实验室类型">
          <template #default="scope">
            <el-tag :color="LabColorType[scope.row.lab_type]">{{lab_method(scope.row.lab_type)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="所属学院">
          <template #default="scope">
            <el-tag :color="CollegeColorType[scope.row.college_type]">{{college_method(scope.row.college_type)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template #default="scope">
            <el-button type="primary"
                       round
                       @click=handleUpdate(scope.row)
            >更新</el-button>
            <el-popconfirm
                title="确认删除此实验室?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="handledelete(scope.row)"
            >
              <template #reference>
                <el-button type="danger"
                           round
                >删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
<!--      预览实验室-->
      <el-dialog v-model="dialogVisible" title="实验室位置" :fullscreen="true" v-if="dialogVisible">
        <LabMap :x="currentItem.x" :y="currentItem.y" :t="currentItem.title"></LabMap>
      </el-dialog>
<!--更新实验室-->
      <el-dialog v-model="dialogUpdateVisible" title="更新实验室" width="30%">
        <el-form
            ref="updateFormRef"
            :model="updateForm"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
            status-icon
        >
          <el-form-item label="实验室名称:" prop="title">
            <el-input v-model="updateForm.title"/>
          </el-form-item>
          <el-form-item label="容纳人数:" prop="capacity">
            <el-input v-model.number="updateForm.capacity"/>
          </el-form-item>
          <el-form-item label="实验室类型:" prop="lab_type">
            <el-select v-model="updateForm.lab_type" class="m-2"
                       placeholder="请选择实验室类型"
                       size="large"
                       style="width:100%"
            >
              <el-option v-for="item in LabType" :key="item.value"
                         :label="item.label" :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属学院:" prop="college_type">
            <el-select v-model="updateForm.college_type" class="m-2"
                       placeholder="请选择所属学院"
                       size="large"
                       style="width:100%"
            >
              <el-option v-for="item in CollegeType" :key="item.value"
                         :label="item.label" :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateConfirm(updateFormRef)">
          确认
        </el-button>
      </span>
        </template>
      </el-dialog>

    </div>
</template>

<script setup>
import {ref, onMounted, reactive} from "vue";
import axios from "axios";
import {CollegeType,LabType,LabColorType,CollegeColorType} from "../../util/type.js"
import LabMap from "../../components/lab-manage/LabMap.vue";

const tableData=ref([])

//渲染列表
onMounted(()=>{
  getlablist()
})
const getlablist=async () =>{
  var res=await axios.get(`/adminapi/labs`)
  tableData.value=res.data
}
const lab_method=(value)=>{
  var obj=LabType.find(item=>item.value===value)
  return obj.label
}
const college_method=(value)=>{
  var obj=CollegeType.find(item=>item.value===value)
  return obj.label
}
//预览实验室
const dialogVisible=ref(false)
const currentItem=ref({});
const handleLocation=(item)=>{
  dialogVisible.value=true
  currentItem.value=item
}
//更新实验室
const dialogUpdateVisible=ref(false)
const updateFormRef=ref()
const updateForm=reactive({
  title:"",
  capacity:"",
  lab_type:"",
  college_type:"",
})
const rules=reactive({
  title: [
    { required: true, message: '请输入实验室名称：', trigger: 'blur' },
  ],
  capacity: [
    { required: true, message: '请输入容纳人数：', trigger: 'blur' },
  ],
  lab_type: [
    { required: true, message: '请选择实验室类型：', trigger: 'blur' },
  ],
  college_type: [
    { required: true, message: '请选择所属学院：', trigger: 'blur' },
  ],
})
//更新按钮事件
const handleUpdate=(item) => {
  dialogUpdateVisible.value=true
  updateForm.title=item.title
  updateForm.capacity=item.capacity
  updateForm.lab_type=item.lab_type
  updateForm.college_type=item.college_type
  currentItem.value=item
}
//确认更新实验室
const handleUpdateConfirm=()=>{
  updateFormRef.value.validate(async (valid)=>{
    if(valid){
      dialogUpdateVisible.value=false
      await axios.put(`/adminapi/labs/${currentItem.value.id}`,updateForm)
      await getlablist()
    }
  })
}
// 删除实验室
const handledelete=async (item)=>{
  await axios.delete(`/adminapi/labs/${item.id}`)
  await getlablist()
}
</script>

<style lang="scss" scoped>
.el-tag{
  --el-tag-text-color: white;
}
</style>